<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>Typography | CSScaffold</title>
	<style type="text/css"><?php echo Scaffold::$output; ?></style>
</head>
<body>
	<div id="type_sheet" style="width:70%; margin:0 auto;">
 
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h1>
 			
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
 
			<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h2>
 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
 
			<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h3>
 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
 
 
			<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h4>
 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
 
 
			<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit, Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h5>
 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
 
 
			<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit, Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h6>
 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
 
			<h1>H1: Lorem ipsum dolor sit amet</h1>
			<h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2>
			<h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
			<h4>H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis</h4>
			<h5>H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h5>
			<h6>H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h6>
 
			<h2>Lists</h2>
 
			<p>These are some other elements you will need to style</p>
 
			<ul>
				<li>Unordered list test</li>
				<li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
				<li>Yet another element in the list</li>
				<li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
			</ul>
			<ol>
				<li>Ordered list test</li>
				<li>Another list element</li>
				<li>Yet another element in the list</li>
			</ol>
 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
 
			<ol>
				<li>Ordered list</li>
				<li>Here's a nested unordered list
				  <ul>
  				  <li>Nested Unordered list</li>
  				  <li>Nested ordered list
  				    <ol>
  				      <li>The first</li>
  				      <li>And the second</li>
  				    </ol>
  				  </li>
  			  </ul>
  			</li>
				<li>Ordered List item</li>
				<li>Nested Ordered list
				  <ol>
				    <li>Some point</li>
				    <li>Nested Unordered list
				      <ul>
  				      <li>The first</li>
  				      <li>And the second</li>
				      </ul>
				    </li>
				  </ol>
				</li>
			</ol>
 
	      <dl>
  				<dt>definition list dt</dt>
	      		<dd>definition list dd</dd>
 
	      		<dt>definition list dt</dt>
	      		<dd>definition list dd</dd>
 
	      		<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
	      		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd>
 
	      		<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
	      		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd>
	      </dl>	
 
	      	<h2>Tables</h2>
 
		      	<table summary="This is the summary text for this table."  border="0" cellspacing="0" cellpadding="0">
		      	<caption><em>Good luck getting the tables to sit perfectly on the baseline</em></caption>
		      	<tr>
		      		<th class="span-4">Table Header One</th>
		        	<th class="span-4 last">Table Header Two</th>
		      	</tr>
		      	<tr>
		      		<td>TD One</td>
		        	<td>TD Two</td>
		      	</tr>
		      	<tr>
		      		<td colspan="2">TD colspan 2</td>
		      	</tr>
		      </table>
 
		      <table summary="This is the summary text for this table."  border="0" cellspacing="0" cellpadding="0">
		      	<caption><em>A test table with a thead, tfoot, and tbody elements</em></caption>
		      	<thead>
		      		<tr>
		      			<th class="span-4">Table Header One</th>
		      	  	<th class="span-4 last">Table Header Two</th>
		      		</tr>
		      	</thead>
		      	<tfoot>
		      		<tr>
		      			<td colspan="2">tfoot footer</td>
		      		</tr>
		      	</tfoot>
		      	<tbody>
		      		<tr>
		      			<td>TD One</td>
		      	  	<td>TD Two</td>
		      		</tr>
		      		<tr>
		      			<td>TD One</td>
		      	  	<td>TD Two</td>
		      		</tr>
		      	</tbody>
		      	<tbody>
		      		<tr>
		      			<td>TD One</td>
		      	  	<td>TD Two</td>
		      		</tr>
		      		<tr>
		      			<td>TD One</td>
		      	  	<td>TD Two</td>
		      		</tr>
		      	</tbody>
		      </table>
 
	      <h2>Other type elements</h2>
 
		      	<p>
	        		<strong>strong</strong><br />
	        		<del>deleted</del><br/>
	        		<dfn>definition</dfn><br/>
	        		<em>emphasis</em>
	      		</p>
 
	      		<p>
	        		<a>anchor</a><br>
	        		<a href="http://www.google.com">a + href</a>
	      		</p>
 
		      <p>
		        <abbr title="extended abbr text should show when mouse over">&lt;abbr&gt; abbr - extended text when mouseover.</abbr><br>
		        <acronym title="extended acronym text should show when mouse over">&lt;acronym&gt; acronym - extended text when mouseover.</acronym>
		      </p>
 
		      <address>
		        &lt;address&gt;<br>
		        Donald Duck<br>
		        Box 555<br>
		        Disneyland
		      </address>
 
	      	   <p>Lorem ipsum dolor sit amet, <code>#id { color:#fff; }</code> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.</p>
 
	      	   <pre>&lt;pre&gt;
pre  space1
pre  space1
pre    space2
pre    space2
pre	tab
pre	tab</pre>
 
<pre><code>&lt;code&gt;
Not indented
	indent1
	indent1
		indent2
			indent3</code></pre>
 
      <tt>&lt;tt&gt;
      This tt text should be monospaced
        and 
        wrap as if 
          one line of text
            even though the code has newlines, spaces, and tabs. 
      It should be the same size as &lt;p&gt; text.
      </tt>
 
 
	</div>
</body>
</html>